<template>
  <div class="box_z">
    <div class="btn_sear_z" @click="$router.push({ name: 'search' })">
      <button class="btn_sear">
        <van-icon size="16px" name="search" />
        <span>请输入搜索关键词</span>
      </button>
    </div>
    <div class="beijing"></div>
    <div class="box_content">
      <img
        :src="img.header"
        alt
        style="border-radius: 10px"
        @click="choose_right"
        v-if="this.$route.params.id == 1"
      />
      <img
        :src="ordinary"
        alt
        style="border-radius: 10px"
        @click="choose_right"
        v-if="this.$route.params.id == 2"
      />
      <div class="box_content_bot">
        <van-row class="box_content_tit">
          <van-col class="tit_tequan">
            {{ this.$route.params.id == 1 ? '金牌会员特权' : '会员特权' }}
          </van-col>
          <van-col class="tit_sp"></van-col>
        </van-row>
        <!-- 内容区域 -->
        <van-row
          class="box_content_info"
          v-for="item in membersGoods"
          :key="item.id"
          @click="toDetail(item.id)"
        >
          <van-col span="6">
            <img :src="item.gallery[0]" alt />
          </van-col>
          <van-col span="18">
            <div class="cont1">
              <!-- <img
                src="https://santu-dev.oss-cn-shanghai.aliyuncs.com/4rymvpdz7h4rs7bxgz1f.png"
                alt
              /> -->
              <span style="margin: 0"
                ><span v-if="padun == 1" style="margin: 0">金牌</span
                >会员下单更省钱</span
              >
              <!-- <span>{{
                ((item.retailPrice - item.memberPrice) * 100) | yuan
              }}</span> -->
            </div>
            <div class="cont2">{{ item.name }}</div>
            <!-- <div class="cont3" v-if="item.keywords">
              <span v-for="(item1, index) in getKeywords(item.keywords)" :key="index">
                <van-tag class="tag" color="#E4E4E5">{{item1}}</van-tag>
              </span>
            </div>-->
            <!-- <div class="cont_z"> -->
            <div class="cont5" style="font-size: 14px">
              <span>{{ (item.retailPrice * 100) | yuan }}</span>
              <span
                style="margin-left: 10px; color: black"
                v-if="userInfo.memberLevel == 2 || userInfo.memberLevel == 1"
                v-show="item.memberPrice > 0"
                >{{ (item.memberPrice * 100) | yuan }}</span
              >
              <img
                src="@/assets/images/member_price.png"
                alt
                v-if="userInfo.memberLevel == 2 || userInfo.memberLevel == 1"
                v-show="item.memberPrice > 0"
              />
            </div>
            <!-- </div> -->
            <div class="cont4">
              <span style="float: right" v-if="item.showSale"
                >月销量: {{ item.saleNum }} 件&nbsp;&nbsp;</span
              >
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 弹出层 -->
    <!-- border-radius:10px; -->
    <van-popup
      v-model="isShow"
      style="padding: 20px 30px; width: 80%; border-radius: 8px"
    >
      <div class="popu_content">
        <span>{{
          userInfo.memberLevel == 1
            ? '您已经是金牌会员啦~'
            : '请联系您的客服经理,开通会员!'
        }}</span>
        <span v-if="userInfo.memberLevel == 1 && userInfo.expireTime != null"
          >{{ userInfo.expireTime.substring(0, 10) }}后方可进行续费操作</span
        >
        <div class="popu_content_anniu" @click="isShow = false">我知道了</div>
      </div>
    </van-popup>
    <!-- 定位立即开通会员 -->
    <div class="pos_bot" @click="choose_right">
      <img
        style="width: 100%"
        :src="img.footer"
        alt
        v-if="this.$route.params.id == 1"
      />
      <img
        style="width: 100%"
        :src="ordinaryfoot"
        alt
        v-if="this.$route.params.id == 2"
      />
    </div>
    <back-top class="pos_back" :scrollmyself="true"></back-top>
  </div>
</template>

<script>
import {
  topicDetail,
  authInfo,
  getMemberGoods,
  adList,
  getOrderSign,
  gethomebutons,
} from '@/api/api';
import { Row, Col, Tag, Toast, Popup, Search, Dialog } from 'vant';
import { getLocalStorage } from '@/utils/local-storage';
import BackTop from '@/components/backtop';
import member_card_head from '@/assets/images/member_card_head.png';
import ordinaryfoot from '@/assets/images/ordinaryfoot.jpg';
import ordinary from '@/assets/images/ordinary.jpg';
export default {
  name: 'menbers',
  data() {
    return {
      membersGoods: [],
      padun: '',
      ordinaryfoot: ordinaryfoot,
      ordinary: '',
      vipid: null,
      membersTopic: {},
      userInfo: {},
      message: '',
      isShow: false,
      img: {
        header: '',
        footer:
          'https://xintu361.oss-cn-qingdao.aliyuncs.com/btojaronwksl22m4x21f.jpg',
      },
      orderSn: undefined,
    };
  },
  created() {
    this.init();
    this.getMembers();
    this.getUserInfo();
  },
  methods: {
    toDetail(id) {
      this.$router.push(`/items/detail/${id}/${this.$route.params.id}`);
    },
    init() {
      // 普通
      // gethomebutons({
      //   userId: Number(getLocalStorage('userId').userId),
      //   mode: "98,99",
      // }).then((res) => {
      //   this.ordinary = res.data.data[0].image;
      // });
      //获取渲染图片
      // 金牌
      adList({
        position: 99,
      })
        .then((res) => {
          let list = res.data.data.list || [];

          list.forEach((item) => {
            this.img.header = item.url;
            if (item.id == 1386) {
              if (item.url) {
                this.img.header = item.url;
              }
            }
            if (item.id == 1387) {
              if (item.url) {
                this.img.footer = item.url;
              }
            }
          });
        })
        .catch((err) => {});
      // 普通
      adList({
        position: 98,
      })
        .then((res) => {
          let list = res.data.data.list || [];

          list.forEach((item) => {
            this.ordinary = item.url;
          });
        })
        .catch((err) => {});
    },

    // 获取用户会员信息
    getUserInfo() {
      authInfo().then((res) => {
        this.userInfo = res.data.data;
      });
    },
    //获取标签逻辑
    getKeywords(str) {
      let arr = [];
      arr = str.split(',');
      return arr;
    },
    // 会员商品列表
    getMembers() {
      topicDetail({ id: this.$route.params.id })
        .then((res) => {
          this.membersGoods = res.data.data.goods;
          this.padun = res.data.data.topic.id;
          // console.log(res.data.data, 3333);
        })
        .catch((res) => {
          console.log(res);
        });
    },
    choose_right() {
      Dialog.confirm({
        title: '系统提示',
        message: '确定购买?',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          if (this.userInfo.mobile == '' || this.userInfo.mobile == undefined) {
            Dialog.confirm({
              title: '系统提示',
              message: '请先登录',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
              .then(() => {
                this.$router.push({ path: '/check' });
              })
              .catch(() => {});
            return;
          }
          this.pay(2);
        })
        .catch(() => {});
    },
    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      if (this.$route.params.id == 1) {
        this.vipid = 1181170;
      } else if (this.$route.params.id == 2) {
        this.vipid = 1181214;
      }
      getOrderSign({
        orderId: this.vipid,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: this.vipid,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Tag.name]: Tag,
    [Toast.name]: Toast,
    [Popup.name]: Popup,
    [BackTop.name]: BackTop,
    [Search.name]: Search,
  },
};
</script>
<style lang="scss" scoped>
.btn_sear_z {
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  padding: 0 16px;

  .btn_sear {
    color: #999999;
    width: 100%;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    border: 0 solid #fff;
    text-align: left;
    padding-left: 10px;
    display: flex;
    align-items: center;

    span {
      margin-left: 2px;
    }
  }
}

.popu_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;

  span:nth-child(1) {
    font-size: 16px;
  }

  span:nth-child(2) {
    margin-top: 10px;
    font-size: 12px;
    color: #ccc;
  }

  .popu_content_anniu {
    margin-top: 30px;
    border-radius: 8px;
    text-align: center;
    line-height: 40px;
    width: 176px;
    height: 40px;
    font-size: 16px;
    background-color: #fec51c;
  }
}

// /deep/.van-toast {
//   line-height: 20px;
//   width: 50px;
//   letter-spacing: 2px;
//   font-size: 30px;
// }
.pos_bot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.pos_back {
  position: fixed;
  bottom: 40px;
  right: 16px;
}

img {
  vertical-align: bottom;
}

.box_z {
  position: relative;
  top: 0;
  bottom: 0;

  .beijing {
    width: 100%;
    height: 530px;
    background-image: url('https://santu-dev.oss-cn-shanghai.aliyuncs.com/4406uxnnhtsoxkcn9jqn.jpg');
  }

  .box_content {
    position: absolute;
    top: 60px;
    left: 0;
    padding: 0 16px;
    width: 100%;
    height: 100%;

    // background-color: pink;
    img {
      width: 100%;
    }

    .box_content_bot {
      font-size: 14px;
      padding: 10px 10px;
      padding-bottom: 45px;
      margin-top: 15px;
      border-radius: 10px;
      width: 100%;
      //   height: calc(100vh - 232px);
      background-color: #fff;
      box-shadow: 0 0 5px #888888;
      color: rgba(16, 16, 16, 1);

      .box_content_tit {
        display: flex;
        align-items: center;
        margin: 5px 0 20px 0;

        .tit_tequan {
          height: 24px;
          font-size: 18px;
          font-weight: 700;
          margin-right: 10px;
        }

        .tit_sp {
          display: flex;
          line-height: 28px;
          height: 24px;
        }
      }

      .box_content_info {
        margin-bottom: 24px;

        .van-col:nth-child(1) {
          border-radius: 3px;
          overflow: hidden;
        }

        .van-col:nth-child(2) {
          padding-left: 8px;

          .cont1 {
            display: flex;
            align-items: center;
            padding-left: 6px;
            height: 24px;
            border-radius: 2px;
            background-color: #fae3a8;

            img {
              width: 20px;
              height: 20px;
            }

            span:nth-child(1) {
              font-weight: 600;
              color: rgba(171, 121, 9, 1);
              margin: 0 6px;
            }

            span:nth-child(3) {
              font-weight: 600;
              color: #f70707;
            }
          }

          .cont2 {
            font-size: 14px;
            color: rgba(21, 20, 20, 1);
            margin-top: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .cont3 {
            // margin-top: 7px;
            span {
              color: rgba(16, 16, 16, 1);

              .van-tag:nth-of-type(n + 1) {
                margin: 8px 8px 0 0;
              }
            }
          }

          .cont4 {
            // margin-left: 6px;
            margin-top: 4px;
            font-size: 12px;
            // font-weight: 600;
            color: #7e7b7b;
            // color: red;
          }

          .cont5 {
            margin-top: 5px;
            display: flex;
            align-items: center;
            // justify-content: center;
            font-size: 16px;
            font-weight: 600;
            color: #f70707;

            img {
              margin-left: 3px;
              width: 48px;
              height: 16px;
            }
          }

          // .cont_z {
          //   display: flex;
          //   align-items: center;
          //   margin-top: 7px;
          //   // height: 20px;
          // }
        }
      }
    }
  }
}
</style>
